<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getMyReport } from "@/api/report";
import Bar from "./components/Bar.vue";
defineOptions({
  name: "Report"
});

const result = ref({});
onMounted(async () => {
  const route = useRoute();
  const id = route.query.id;
  if (!id) return;

  const res = await getMyReport(id);
  console.log("查询结果是", res);
  result.value = res.data;
});
</script>

<template>
  <div class="w-11/12 p-4 ml-auto mr-auto">
    <h3 class="mb-4 text-center">用户查看结果</h3>
    <div class="">
      <p class="mb-4">
        <label>姓名</label> {{ result.name }} <label>电话</label>
        {{ result.phone }}
      </p>

      <table class="w-full mb-8" border="1" cellspacing="0">
        <tr>
          <td style="background: #ffc000">
            <div>视觉</div>
            <div>Visual</div>
          </td>
          <td style="background: #4f81db">
            <div>听觉</div>
            <div>digital</div>
          </td>
          <td style="background: #00b050">
            <div>动觉</div>
            <div>Kinesthetic</div>
          </td>
          <td style="background: #f79646">
            <div>自语</div>
            <div>Auditory-Digital</div>
          </td>
        </tr>
        <tr>
          <td>{{ result["视觉"] }}</td>
          <td>{{ result["听觉"] }}</td>
          <td>{{ result["动觉"] }}</td>
          <td>{{ result["自语"] }}</td>
        </tr>
      </table>
      <Bar :data="result" />
    </div>
  </div>
</template>

<style scoped>
.contain {
  width: 80%;
  margin: 0 auto;
}
.contain table {
  width: 100%;
  margin: 0 auto;
}

table,
td {
  border: 1px solid #444;
  border-collapse: collapse;
  vertical-align: middle;
  text-align: center;
  padding: 5px;
}
</style>
